<script setup lang="ts">
import { reactive } from 'vue'

const form = reactive({
  phone: '',
  passwd: '',
  invitation_code: '',
})

const onSubmit = () => {
  console.log('submit!')
}
</script>

<template>
  <div class="bodybox">
    <el-row justify="center">
      <el-col :span="12">
        <el-card style="width: 50vh;margin-left: auto; margin-right: auto;">
          <h1 style="text-align:center;  font-weight: bold;  color:#409EFF; margin-bottom: 15px">找回密码</h1>
          <el-form :model="form" label-width="auto" style="width: 100%">
            <el-form-item label="账号" >
              <el-input v-model="form.phone" style="width: 100%;" placeholder="输入邮箱地址" />
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.passwd" style="width: 100%;" type="password" placeholder="输入新密码" show-password/>
            </el-form-item>
            <el-form-item label="验证码" >
              <el-input v-model="form.invitation_code" style="width: 100%;" placeholder="输入验证码" />
            </el-form-item>
            <el-form-item>
              <div style="display: flex;justify-content: space-between;width: 100%;">
                <el-button type="primary"  style="width: 35%; margin-left: 20px"  @click="">发送验证码</el-button>
                <el-button type="primary"  style="width: 35%; margin-right: 20px"  @click="onSubmit">确认修改</el-button>
              </div>
            </el-form-item>
            <el-form-item>
              <el-link type="primary" href="#/login">前往登录</el-link>
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<style scoped>
.bodybox {
  background:url("/img/bjt.jpg");
  width:100%;
  height:100%;
  position:fixed;
  background-size:100%;
}
.el-row{
  margin-top:30vh;
}
.el-card{
  justify-content: center;
  align-items: center;
}
</style>
